<template>
  <el-form class="search-bar" :model="queryParams" ref="queryRef" :inline="true" label-width="0px">
    <el-row>
      <el-col :span="2.5" v-if="options.group">
        <el-form-item>
          <el-select v-model="queryParams.groupId" placeholder="分组" style="width: 125px;">
            <el-option
              v-for="item in groupOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="2.5" v-if="options.type">
        <el-form-item>
          <el-select v-model="queryParams.belong" placeholder="类型" style="width: 125px;">
            <el-option label="全部类型" value=""/>
            <el-option label="租客" value="1"/>
            <el-option label="业主" value="2"/>
          </el-select>
        </el-form-item>
      </el-col>
      <!-- 汇总类型 -->
      <el-col :span="2.5" v-if="options.subType">
        <el-form-item>
          <el-select v-model="queryParams.enterType" placeholder="类型" style="width: 125px;">
            <el-option label="全部类型" value=""/>
            <el-option label="今日录入" value="1"/>
            <el-option label="7日录入" value="2"/>
            <el-option label="30日录入" value="3"/>
            <el-option label="无待收账单房间" value="4"/>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="2.5" v-if="options.inoutFlag">
        <el-form-item>
          <el-select v-model="queryParams.inoutFlag" placeholder="收支" style="width: 125px;">
            <el-option label="全部收支" value=""/>
            <el-option label="收入" value="1"/>
            <el-option label="支出" value="2"/>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="2.5" v-if="options.paymentType">
        <el-form-item>
          <el-select v-model="queryParams.payPlatForm" placeholder="支付方式" style="width: 125px;">
            <el-option label="全部" value=""/>
            <el-option label="线下支付" value="1"/>
            <el-option label="线上支付" value="2"/>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="2.5" v-if="options.billDate">
        <el-form-item>
          <el-select v-model="queryParams.billDate" placeholder="状态" style="width: 125px;">
            <el-option label="全部状态" value=""/>
            <el-option label="即将到期" value="1"/>
            <el-option label="已逾期" value="2"/>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="4.5" v-if="options.searchStr">
        <el-form-item>
          <el-input
            v-model="queryParams.keyWord"
            placeholder="搜索入住人、房源地址、费用名称"
            clearable
            style="width: 240px"
            @keyup.enter="handleQuery"
          >
            <template #append>
              <el-button :icon="Search" @click="handleQuery" />
            </template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="4.5" v-if="options.date">
        <el-form-item required>
          <el-row>
            <el-col :span="11">
              <el-form-item prop="startDate">
                <el-date-picker
                  v-model="queryParams.startDate"
                  type="date"
                  value-format="YYYY-MM-DD"
                  placeholder="请选择开始时间"
                  style="width: 160px;"
                  @change="handleStartDateChange"
                />
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <div style="text-align: center;width: 100%;">-</div>
            </el-col>
            <el-col :span="11">
              <el-form-item prop="endDate">
                <el-date-picker
                  v-model="queryParams.endDate"
                  type="date"
                  value-format="YYYY-MM-DD"
                  placeholder="请选择结束时间"
                  style="width: 160px;"
                  @change="handleEndDateChange"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" @click="handleQuery">查询</el-button>
      </el-col>
      <!-- <div style="margin-left: auto;">
        <el-button plain type="primary" @click="handleExport">导出账单</el-button>
      </div> -->
    </el-row>
  </el-form>
</template>
<script setup name="SearchBar">
import groupApi from '@/api/setting/group'
import { Search } from '@element-plus/icons-vue'

const emit = defineEmits()
const props = defineProps({
  options: {
    type: Object,
    default: () => {
      return {
        group: false,
        type: false,
        subType: false,
        inoutFlag: false,
        paymentType: false,
        billDate: false,
        searchStr: false,
        date: false
      }
    }
  }
})

const groupOptions = ref([])

const data = reactive({
  queryParams: {
    groupId: null,
    belong: null,
    inoutFlag: null,
    payPlatForm: null,
    billDate: null,
    keyWord: null,
    enterType: null,
    startDate: '',
    endDate: ''
  }
})
const { queryParams } = toRefs(data)

/* 开始日期选择 */
function handleStartDateChange() {}
/* 结束日期选择 */
function handleEndDateChange() {}

/* 搜索事件 */
function handleQuery() {
  console.log(queryParams.value);
  
  emit('change', queryParams.value)
}
/* 导出 */
function handleExport() {}

// 获取分组列表
function getGroupList() {
  groupApi.getList().then(res => {
    groupOptions.value = res.rows.map(item => ({
      label: item.groupName,
      value: item.groupId
    }))
    queryParams.value.groupId = groupOptions.value[0].value
  })
}
getGroupList()
</script>
<style lang="scss" scoped>
.search-bar {
  .el-form-item {
    margin-right: 16px
  }
}
</style>